<template>
  <div class="resource-item clearfix">
    <span :class="'title ' + titleIcon('mp4')">
      <a :href="'#/teacher-course/'+value.user__id+'?content='+value.url + '&title=' + value.title">{{value.title}}</a>
    </span>
    <span class="teacher">
      <div class="img-container">
        <img :src="user"/>
      </div>
      <span>{{value.user__user__real_name}}</span>
    </span>
    <span class="info">
      <span>课程类型：{{value.yd_type}}</span>
      <span>浏览：{{value.visit}}</span>
      <span>{{value.price}}语点</span>
    </span>
    <input class="url" type="text" :id="'download_url_' + value.id" :value="appOrigin + '#/resource/download/' + value.id"/>
    <span class="option">
      <a href="javascript:;" title="收藏" @click="handleCollect">
        <i :class="value.collected ? 'xyd-collection_a animated bounce' : 'xyd-collection2'"></i>
      </a>
      <a href="javascript:;" title="下载" @click="handleDownload">
        <i class="xyd-download2" ></i>
      </a>
      <a href="javascript:;" title="预览" @click="handlePreview">
        <i class="xyd-player2" ></i>
      </a>
      <a href="javascript:;" title="分享" @click="handleShare">
        <i class="xyd-share2" ></i>
      </a>
    </span>
  </div>
</template>

<script>
import { collect } from 'api/resource'
import user from 'assets/mock_images/user.jpg'
export default {
  name: 'resourceItem',
  data() {
    return {
      user,
      appOrigin: process.env.APP_ORIGIN,
      collected: false,
      collectedStatus: 'xyd-collection_a'
    };
  },
  props: {
    value: {
      type: Object,
      default() {
        return {/*  */}
      }
    }
  },
  methods: {
    titleIcon(ext) {
      const types = {
        word: ['doc', 'docx', 'word'],
        ppt: ['ppt'],
        pdf: ['pdf'],
        excel: ['xlsx'],
        video: ['mp4', 'MP4', 'mkv'],
        music: ['mp3'],
        zip: ['zip', 'rar']
      }
      for (const key in types) {
        if (types[key].filter(v => v === ext).length > 0) {
          return key
        }
      }
      return ''
    },
    handleCollect() {
      const { id, catid, title, price } = this.value
      this.value.collected = true
      collect({
        rsid: id,
        cat: catid,
        rsname: title,
        price
      })
      .then(res => console.log(res))
      .catch(() => {
        this.value.collected = false
      })
    },
    handleDownload() {
      // this.$emit('download')
      this.$router.push('/teacher-course/' + this.value.id)
    },
    handlePreview() {
      // this.$emit('preview')
      this.$router.push('/teacher-course/' + this.value.id)
    },
    handleShare() {
      const did = document.getElementById('download_url_' + this.value.id)
      did.select()
      document.execCommand('copy', true)
      this.$message({
        message: '资源链接已成功复制到剪贴板，快去分享吧~',
        type: 'success'
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../../styles/mixin.scss';
.resource-item{
  padding: 30px 0;
  border-bottom: 1px solid #e5e6e7;
  position: relative;
  .title{
    display: inline-block;
    line-height: 25px;
    padding-left: 25px;
    background-image: url('../../assets/common_images/doc.png');
    background-repeat: no-repeat;
    background-size: 24px;
    vertical-align: middle;
    @include ellipsis(300px)
    >a:hover{
      text-decoration: underline;
      color: #00A2EA;
    }
  }
  .word{
    background-image: url('../../assets/common_images/doc.png');
  }
  .ppt{
    background-image: url('../../assets/common_images/ppt.png');
  }
  .pdf{
    background-image: url('../../assets/common_images/pdf.png');
  }
  // .excel{
  //   background-image: url('../../assets/common_images/excel.png');
  // }
  .zip{
    background-image: url('../../assets/common_images/rar.png');
  }
  .music{
    background-image: url('../../assets/common_images/mp3.png');
  }
  .video{
    background-image: url('../../assets/common_images/video.png');
  }
  .teacher{
    .img-container{
      display: inline-block;
      vertical-align: middle;
      width: 36px;
      height: 36px;
      border-radius: 18px;
      overflow: hidden;
      >img{
        width: 100%;
      }
    }
    >span{
      vertical-align: middle;
      display: inline-block;
      @include ellipsis(130px)
    }
  }
  .info{
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: #999;
    width: 200px;
    word-break: break-all;//截断，中文无影响，英文会直接截断，或者用normal
    overflow: hidden;//溢出隐藏
    text-overflow: ellipsis;//省略号
    white-space: nowrap;//不换行
    >span{
      margin-right: 10px;
    }
  }
  .option{
    float: right;
    line-height: 36px;
    >a{
      padding: 0 10px;
    }
  }
  .url{
    opacity: 0;
    position: absolute;
    z-index: -1;
  }
}
</style>